<template>
  <div>
    <Header></Header>
    <div style="background:#f8f8f8;width:100%;height:30px;"></div>
    <div class="article">
      <div class="left">
        <h2>{{articleInfo.title}}</h2>
        <div class="content" >
          <div class="content_item" v-html="articleInfo.content">
             <!-- {{articleInfo.content}} -->
          </div>
        </div>
        
        <div class="tag">
          <span>2年</span>
          <span>初级</span>
          <span>迭代规划</span>
        </div>
        <div class="author">
          <div class="title">给作者打赏，鼓励TA抓紧创作</div>
          <button class="pay" @click="pay">赞赏</button>
          <div class="num">2人打赏</div>
          <div class="imgList">
            <div class="img_item">
              <img src="../../assets/images/item.jpg" alt>
            </div>
            <div class="img_item">
              <img src="../../assets/images/item.jpg" alt>
            </div>
          </div>
        </div>
        <div class="actions">
          <div class="left">
            <span><i class="iconfont icon-all-weixin"></i></span>
            <span><i class="iconfont icon-all-weibo"></i></span>
            
            
            <!-- <img src="../../assets/images/card.jpg" alt>
            <img src="../../assets/images/card.jpg" alt> -->
          </div>
          <div class="right">
            <button class="sc">
              <span class="is-default">收藏</span>
              <span class="is-active">已收藏</span>
              |
              <span class="count">56</span>
            </button>
            <button class="zan">
              <span class="is-default">赞</span>
              <span class="is-active">已赞</span>
              |
              <span class="count">56</span>
            </button>
          </div>
        </div>
        <div class="author-info">
          <div class="l">
            <img src="../../assets/images/card.jpg" alt>
          </div>
          <div class="c">
            <div class="title">
              <span class="name">hursing</span>
              <button>
                <span class="is-default">订阅专栏</span>
                <span class="is-active">取消订阅</span>
              </button>
            </div>
          </div>
          <div class="r">
            <div class="author-info-item">
              <i>2篇</i>
              作品
            </div>
            <div class="author-info-item">
              <i>2.5万</i>
              总阅读量
            </div>
          </div>
        </div>
        <div class="comment">
          <div class="header">
            <span>评论</span>
          </div>
          <div class="container" v-if="show">
            <textarea name="comment" id placeholder="欢迎留言讨论~！"></textarea>
            <div class="container-foot">
              <div class="smilies-wrapper">
                <span class="button--smile">
                  <i></i>
                  <span class="fa"></span>表情
                </span>
              </div>
              <input class="comment-submit" type="submit" value="发布">
            </div>
          </div>
          <div class="commentshow">
            <ol class="comment-ol">
              <!-- <li class="comment-list">
                <div class="comment-block">
                  <div class="comment-avatar">
                    <img
                      src="../../assets/images/card.jpg"
                      alt
                      height="40"
                      width="40"
                      class="avatar"
                    >
                  </div>
                  <div class="comment-info">
                    <div class="comment-meta">
                      <div class="comment-author">Promise</div>
                    </div>
                  </div>
                  <div class="comment-content">
                    <p>1111</p>
                  </div>
                  <div class="comment-bottom">
                    <span>2018/12/17</span>
                    <span style="text-algin:right" @click="reply">回复</span>
                  </div>
                </div>
                <ol></ol>
              </li>-->
              <li class="comment-list">
                <div class="comment-block">
                  <div class="comment-avatar">
                    <img
                      src="../../assets/images/card.jpg"
                      alt
                      height="40"
                      width="40"
                      class="avatar"
                    >
                  </div>
                  <div class="comment-info">
                    <div class="comment-meta">
                      <div class="comment-author">Promise</div>
                    </div>
                  </div>
                  <div class="comment-content">
                    <p>
                      对产品功能的迭代规划，需要一定的工作经验沉淀，
                      有技术功底做支撑，更容易做出科学可落地的产品迭代上线规划，
                      其中体现了ACP和PMP的思想 ;-)
                    </p>
                  </div>
                  <div class="comment-bottom">
                    <span>2018/12/17</span>
                    <span style="text-algin:right" @click="reply">回复</span>
                  </div>
                </div>
                <div class="container" v-if="show1">
                  <textarea name="comment" id placeholder="欢迎留言讨论~！"></textarea>
                  <div class="container-foot">
                    <div class="smilies-wrapper">
                      <span class="button--smile">
                        <i></i>
                        <span class="fa" @click="brow"></span>表情
                      </span>
                      
                    </div>
                    <span class="qx" @click="cancel">取消回复</span>
                    <input class="comment-submit" type="submit" value="发布">
                  </div>
                </div>
                <ol class="children">
                  <li class="comment">
                    <div class="comment-block">
                      <div class="comment-avatar">
                        <img
                          src="../../assets/images/icon.jpg"
                          alt
                          height="40"
                          width="40"
                          class="avatar"
                        >
                      </div>
                      <div class="comment-info">
                        <div class="comment-meta">
                          <div class="comment-author">Promise</div>
                        </div>
                      </div>
                      <div class="comment-content">
                        <p>111</p>
                      </div>
                      <div class="u-clearfix comment-bottom">2018/12/17</div>
                    </div>
                  </li>
                </ol>
              </li>
            </ol>
          </div>
        </div>
        <div class="photo">
          <div class="photo-title">您可能感兴趣的文章</div>
          <div class="photo-posts">
            <div class="photo-posts-item">
              <img src="../../assets/images/ptoto.png" alt>
              <p>变现艰难、不如预期，现在小程序还能吃到微信的红利吗？</p>
            </div>
            <div class="photo-posts-item">
              <img src="../../assets/images/ptoto.png" alt>
              <p>变现艰难、不如预期，现在小程序还能吃到微信的红利吗？</p>
            </div>
            <div class="photo-posts-item">
              <img src="../../assets/images/ptoto.png" alt>
              <p>变现艰难、不如预期，现在小程序还能吃到微信的红利吗？</p>
            </div>
            <div class="photo-posts-item">
              <img src="../../assets/images/ptoto.png" alt>
              <p>变现艰难、不如预期，现在小程序还能吃到微信的红利吗？</p>
            </div>
          </div>
        </div>
      </div>
      <div class="right">
        <img src="../../assets/images/card.jpg" alt>
        <img src="../../assets/images/card.jpg" alt>
        <div class="right-tags">
          <div class="tags-title">
            <P>热门标签</P>
          </div>
          <div class="tags-content">
            <div>
              <span>配置信</span>
              <span>配置信</span>
              <span>配置信</span>
              <span>配置信</span>
              <span>配置信</span>
              <span>配置信</span>
              <span>配置信</span>
              <span>配置信</span>
              <span>配置信</span>
            </div>
          </div>
        </div>
        <div class="tags-list">
          <div class="box">2019年十大营销关键词</div>
          <div class="list-title">
            <P>热门文章</P>
          </div>
          <img src="../../assets/images/card.jpg" alt>
        </div>
      </div>
    </div>
    <div class="overlay" v-if="flag">
      <div class="flag">
        <button class="close" @click="close">×</button>
        <div class="flag-body" v-if="msg">
          <header>
            <img src="../../assets/images/card.jpg" alt>
            <h3>给作者打赏，鼓励TA抓紧创作！</h3>
          </header>
          <div class="payway u-textAlignLeft">
            <h5 class="wpd-payway-title">选择支付金额</h5>
            <div>
              <label class="demo--label">
                <input class="demo--radio" type="radio" name="paycount" value="1" checked="true">
                <span class="demo--radioText">1元</span>
              </label>
              <label class="demo--label">
                <input class="demo--radio" type="radio" name="paycount" value="2">
                <span class="demo--radioText">2元</span>
              </label>
              <label class="demo--label">
                <input class="demo--radio" type="radio" name="paycount" value="5">
                <span class="demo--radioText">5元</span>
              </label>
            </div>
          </div>
          <div class="payway u-textAlignLeft">
            <h5 class="wpd-payway-title">选择支付方式</h5>
            <label class="demo--label">
              <input class="demo--radio" type="radio" name="payway" value="wechat" checked="true">
              <span class="demo--radioInput"></span>
              <img
                class="day wechat"
                src="//image.woshipm.com/wp-files/2017/08/BXSWI33kxkno7ro13E4h.png"
              >
            </label>
            <label class="demo--label">
              <input class="demo--radio" type="radio" name="payway" value="alipay">
              <span class="demo--radioInput"></span>
              <img
                class="day alipay"
                src="//image.woshipm.com/wp-files/2017/08/jIjdFOOUZUr57boyGkL1.png"
              >
            </label>
          </div>
          <div class="wpd-inputs u-textAlignLeft">
            <div class="wpd-input-item message">
              <textarea
                id="reward_message"
                name="message"
                class="wpd-input-textarea"
                placeholder="给Ta留言"
              ></textarea>
            </div>
          </div>
          <div class="overlay-actions buttonSet">
            <div class="buttonSet buttonSet--vertical">
              <button class="wpd-btn-confirm" data-action="pay">
                <span class="button-label js-buttonLabel" @click="goPay">立即支付</span>
              </button>
              <div class="wpd-overlay-notice">注：打赏的收益归作者，非平台</div>
            </div>
          </div>
        </div>
        <div class="flag-zf" v-if="play">
          <h4>微信扫描支付</h4>
          <p>
            打赏金额: <span>1元</span>
          </p>
          <img src="../../assets/images/rwm.png" alt="">
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Header from "@/common/Header/Header";
import qs from "qs";
export default {
  name: "article",
  data() {
    return {
      show: true,
      show1: false,
      flag: false,
      flag1: false,
      play:false,
      msg:true,
      id:'',
      articleInfo:{},
    };
  },
  methods: {
    reply() {
      this.show = false;
      this.show1 = true;
    },
    cancel() {
      this.show = true;
      this.show1 = false;
    },
    pay() {
      this.play = false;
      this.flag = true;

    },
    close() {
      this.flag = false;
      this.msg = true;
      this.play = false;
    },
    goPay() {
      this.msg = false;
      this.play = true;
    },
    //接收单个文章ID
    getmessage(){
       this.id = this.$route.query.article_id;
       console.log(this.id)
    },
    // 获取单个文章
    getarticle(){
      let param = {
       article_id:this.id       
      };
      this.$axios
        .post("api/App/User/News/news_detail", qs.stringify(param), {
          headers: { "Content-Type": "application/x-www-form-urlencoded" }
        })
        .then(res => {   
          console.log(res) 
         this.articleInfo = res.data.data.info;
         console.log(this.articleInfo)
         
        });
    }
  },
  components: {
    Header
  },
  created(){
    this.getmessage();
    this.getarticle();
  }

};
</script>
<style lang="scss" scoped>
.article {
  width: 1170px;
  height: auto;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  .left {
    width: 810px;
    background: #f5f5f5;
    h2 {
      width: 95%;
      margin: 0 auto;
      text-align: left;
      border-left: 3px solid #000;
      padding-left: 10px;
      margin-bottom: 20px;
    }
    .content {
      width: 95%;
      height: auto ;
      margin: 0 auto;
      text-align: left;
      border-bottom: 1px solid #9f9f9f;
      padding-bottom: 10px;
      line-height: 2;
      font-size: 16px;
      background: #fff;
      .content_item{
        padding:20px;
        width: 100%;
          img{
            width: 100%!important;
            height: 100%!important;
          } 
      }
    }
    .introduce {
      width: 95%;
      height: auto;
      margin: 0 auto;
      text-align: left;
      margin-top: 10px;
      // line-height: 2;
      // padding-left: 10px;
      border-bottom: 1px solid #9f9f9f;
      p {
        font-size: 16px;
      }
      img {
        width: 98%;
        // height: 50px;
        padding-bottom: 20px;
      }
    }
    .tag {
      width: 95%;
      height: auto;
      margin: 0 auto;
      text-align: left;
      margin-top: 10px;
      span {
        display: inline-block;
        border-radius: 2px;
        margin-right: 10px;
        padding: 3px 10px;
        background: #f2f5fb;
        &:hover {
          background-color: #5079b7;
          color: #fff;
        }
      }
    }
    .author {
      width: 95%;
      height: auto;
      margin: 0 auto;
      margin-top: 30px;
      background-color: #f2f5fb;
      text-align: center;
      border-radius: 5px;
      padding: 25px 0;
      .pay {
        border-radius: 999em;
        background-color: #5079b7;
        color: #fff;
        border: 1px solid #5079b7;
        padding: 0 14px;
        margin-top: 20px;
        font-size: 14px;
        height: 32px;
        line-height: 31px;
        cursor: pointer;
        fill: #fff;
        outline: none;
      }
      .num {
        font-size: 12px;
        margin-top: 8px;
        color: rgba(0, 0, 0, 0.44);
      }
      .imgList {
        margin-top: 8px;
        .img_item {
          display: inline-block;
          :first-child {
            margin-left: 0;
          }
          img {
            width: 32px;
            height: 32px;
            border-radius: 100%;
            border: 2px solid #fff;
          }
        }
      }
    }
    .actions {
      width: 95%;
      height: auto;
      margin: 0 auto;
      overflow: hidden;
      margin-top: 20px;
      // display: flex;
      // justify-content: space-around;
      .left {
        float: left;
        width: 100px;
        margin-left: -10px;
        span {
          display: inline-block;
          height: 30px;
          width: 30px;
          border-radius: 100%;
          border:1px solid #666;
          &:hover{
            background: #1afa29;
          }
          
          i{
            font-size: 23px;
            &:hover{
              color:#fff;
            }
          }
        }
      }
      .right {
        float: right;
        margin-right: -90px;
        .sc {
          border-color: #a3b4c1;
          color: #a3b4c1;
          fill: #a3b4c1;
          border-radius: 999em;
          outline: none;
          border: none;
          background: #fff;
          .is-default {
            display: inline;
          }
          .is-active {
            display: none;
          }
        }
        .zan {
          border-color: #a3b4c1;
          color: #a3b4c1;
          fill: #a3b4c1;
          background: #fff;
          border-radius: 999em;
          outline: none;
          border: none;
          margin-left: 10px;
          .is-default {
            display: inline;
          }
          .is-active {
            display: none;
          }
        }
      }
    }
    .author-info {
      width: 95%;
      height: auto;
      margin: 0 auto;
      display: flex;
      // justify-content: space-between;
      margin-top: 30px;
      .l {
        flex: 0 0 auto;
        width: 60px;
        height: 60px;
        img {
          display: inline-block;
          width: 100%;
          height: 100%;
          border-radius: 100%;
        }
      }
      .c {
        flex: 1 1 auto;
        text-align: left;
        padding-left: 10px;
        .name {
          font-size: 18px;
          font-weight: 600;
          margin-bottom: 10px;
          display: inline-block;
          margin-top: 5px;
        }
        button {
          border-radius: 999em;
          font-size: 12px;
          height: 19px;
          line-height: 18px;
          padding: 0 10px;
          margin-left: 8px;
          color: #5079b7;
          border-color: #5079b7;
          outline: none;
          border: none;
          .is-default {
            display: inline;
            font-size: 12px;
          }
          .is-active {
            display: none;
            font-size: 12px;
          }
        }
      }
      .r {
        flex: 0 0 auto;
        .author-info-item {
          display: inline-block;
          font-size: 14px;
          height: 60px;
          margin-top: 5px;
          padding: 0 15px;
          text-align: center;
          color: #a5aab0;
          :nth-child(2n + 2) {
            border-left: 1px solid #eee;
          }
          i {
            display: block;
            font-size: 18px;
            font-style: normal;
            font-weight: 700;
            line-height: 1.8;
            color: rgba(0, 0, 0, 0.8);
          }
        }
      }
    }
    .comment {
      width: 95%;
      height: auto;
      margin: 0 auto;
      border-radius: 5px;
      margin-top: 20px;
      .header {
        text-align: left;
        span {
          border-left: 4px solid #5079b7;
          display: inline-block;
          line-height: 1.2;
          padding-left: 4px;
        }
      }
      .container {
        padding-top: 15px;

        textarea {
          resize: none;
          border-radius: 5px;
          border: 0;
          width: 100%;
          font-size: 12px;
          height: 100px;
          outline: none;
        }
        .container-foot {
          padding-top: 10px;
          text-align: left;
          display: flex;
          justify-content: space-between;
          .comment-submit {
            border: 1px solid #5079b7;
            background-color: #fff;
            color: #5079b7;
            display: inline-block;
            padding: 0 10px;
            border-radius: 5px;
            font-size: 14px;
            line-height: 23px;
            height: 24px;
            cursor: pointer;
            outline: none;
          }
          .smilies-wrapper {
            cursor: pointer;
            position: relative;
            .button--smile {
              font-size: 12px;
              .fa {
                font-size: 20px;
                display: inline-block;
                margin-right: 6px;
                vertical-align: -3px;
              }
              i {
                width: 30px;
                height: 30px;
                background: red;
              }
            }
            .my-smilies {
              background-color: #fff;
              border: 1px solid #eee;
              border-radius: 5px;
              display: none;
              left: -36px;
              padding: 10px;
              position: absolute;
              top: 40px;
              width: 210px;
              z-index: 1;
            }
          }
        }
      }
      .commentshow {
        width: 100%;
        height: auto;
        .comment-ol {
          padding-left: 0;
          list-style: none;
          .comment-list {
            text-align: left;
            border-bottom: 1px solid #eee;
            padding-top: 20px;
            padding-bottom: 20px;
            padding-left: 50px;
            position: relative;
            .comment-block {
              .comment-avatar {
                position: absolute;
                left: 0;
                top: 19px;
                img {
                  border-radius: 100%;
                }
              }
              .comment-info {
                font-size: 14px;
                margin-bottom: 6px;
                .comment-meta {
                  min-height: 16px;
                  .comment-author {
                    color: #5079b7;
                  }
                }
              }
              .comment-content {
                line-height: 1.6;
                color: #666;
                font-size: 14px;
                margin-bottom: 6px;
              }
              .comment-bottom {
                color: #a5aab0;
                font-size: 12px;
                display: flex;
                justify-content: space-between;
              }
            }
            .children {
              background-color: #f2f5fb;
              border-radius: 5px;
              padding: 5px 15px;
              margin-top: 10px;
              list-style: none;
              .comment {
                border-bottom: 1px dotted #ddd;
                padding-top: 8px;
                padding-bottom: 8px;
                padding-left: 0;
                .comment-block .comment-avatar {
                  position: static;
                  float: left;
                }
                .comment-info {
                  padding-top: 8px;
                  padding-bottom: 12px;
                  margin-bottom: 0;
                  font-size: 12px;
                  .comment-author {
                    margin-left: 50px;
                  }
                }
              }
            }
            .container {
              padding-top: 15px;

              textarea {
                resize: none;
                border-radius: 5px;
                border: 0;
                width: 100%;
                font-size: 12px;
                height: 100px;
                outline: none;
              }
              .container-foot {
                padding-top: 10px;
                text-align: left;
                display: flex;
                justify-content: space-between;
                .qx {
                  margin-right: -520px;
                  color: #999;
                  font-size: 14px;
                  padding-top: 4px;
                }
                .comment-submit {
                  border: 1px solid #5079b7;
                  background-color: #fff;
                  color: #5079b7;
                  display: inline-block;
                  padding: 0 10px;
                  border-radius: 5px;
                  font-size: 14px;
                  line-height: 23px;
                  height: 24px;
                  cursor: pointer;
                  outline: none;
                }
                .smilies-wrapper {
                  cursor: pointer;
                  position: relative;
                  .button--smile {
                    font-size: 12px;
                    .fa {
                      font-size: 20px;
                      display: inline-block;
                      margin-right: 6px;
                      vertical-align: -3px;
                    }
                    i {
                      width: 30px;
                      height: 30px;
                      background: red;
                    }
                  }
                  .my-smilies {
                    background-color: #fff;
                    border: 1px solid #eee;
                    border-radius: 5px;
                    display: none;
                    left: -36px;
                    padding: 10px;
                    position: absolute;
                    top: 40px;
                    width: 210px;
                    z-index: 1;
                  }
                }
              }
            }
          }
        }
      }
    }
    .photo {
      width: 95%;
      height: auto;
      margin: 0 auto;
      .photo-title {
        color: #243342;
        font-weight: 400;
        font-size: 16px;
        border-left: 4px solid #5079b7;
        padding-left: 4px;
        line-height: 1.3;
        margin-top: 0;
        text-align: left;
      }
      .photo-posts {
        display: flex;
        flex-wrap: wrap;
        padding-top: 5px;
        margin-top: 10px;
        .photo-posts-item {
          width: 30%;
          vertical-align: top;
          margin-bottom: 15px;
          line-height: 1.8;
          position: relative;
          margin-right: 5%;
          img {
            display: block;
            width: 100%;
            border-radius: 10px;
          }
          p {
            text-align: left;
          }
        }
      }
    }
  }
  .right {
    width: 330px;
    img {
      display: block;
      width: 100%;
      height: 130px;
      border-radius: 10px;
      margin-bottom: 40px;
    }
    .right-tags {
      background: #fff;
      width: 100%;
      height: 220px;
      .tags-title {
        width: 90%;
        height: 50px;
        margin: 0 auto;
        position: relative;
        border-bottom: 2px solid #f8f8f8;
        p {
          position: absolute;
          left: 0;
          bottom: -18px;
          font-size: 18px;
          border-bottom: 2px solid #5b90bc;
        }
      }
      .tags-content {
        width: 170px;
        width: 90%;
        margin: 0 auto;
        margin-top: 10px;
        div {
          width: 80%;
          padding-left: 20px;
          span {
            display: inline-block;
            width: 60px;
            height: 20px;
            border-radius: 10px;
            font-size: 10px;
            color: #ddd;
            border: 1px solid #ddd;
            margin-bottom: 20px;
          }
        }
      }
    }
    .tags-list {
      background: #f5f5f5;
      width: 100%;
      margin-top: 30px;
      height: 200px;
      position: relative;
      .box {
        height: 50px;
        width: 90%;
        position: absolute;
        bottom: -10px;
        left: 5%;
        color: #f5f5f5;
        background: #000;
        opacity: 0.5;
        border-radius: 0px 0px 10px 10px;
        line-height: 50px;
        font-size: 18px;
        padding-right: 80px;
      }
      .list-title {
        width: 90%;
        height: 50px;
        margin: 0 auto;
        position: relative;
        border-bottom: 2px solid #f0f0f0;
        p {
          position: absolute;
          left: 0;
          bottom: -18px;
          font-size: 18px;
          border-bottom: 2px solid #5b90bc;
        }
      }
      img {
        display: block;
        width: 90%;
        margin: 0 auto;
        height: 150px;
        border-radius: 10px;
        margin-top: 10px;
      }
    }
  }
  .photo .photo-posts-item:nth-child(3n + 3) {
    margin-right: 0px !important;
  }
}
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 9999;
  .flag {
    background-color: #fff;
    border-radius: 5px;
    padding: 40px;
    max-width: 540px;
    display: inline-block;
    position: relative;
    overflow: hidden;
    margin-top: 40px;
    // height: 60px;
    .close {
      font-size: 24px;
      font-style: normal;
      font-weight: 700;
      letter-spacing: 0;
      padding: 5px 15px;
      position: absolute;
      right: 0;
      top: 0;
      z-index: 10000000;
      color: #aaa;
      background-color: #fff;
      border: 0;
      cursor: pointer;
      outline: none;
    }
    .flag-body {
      header {
        text-align: center;
        padding-top: 15px;
        img {
          border-radius: 100%;
          margin-left: 15px;
          height: 64px;
          width: 64px;
        }
        h3 {
          font-size: 16px;
          margin-bottom: 15px;
        }
      }
      .payway {
        .demo--radio:checked + .demo--radioInput:after {
          background-color: #5079b7;
          border-radius: 100%;
          content: "";
          display: inline-block;
          height: 12px;
          margin: 2px;
          width: 12px;
        }
        .day {
          height: 30px;
          width: auto;
          display: inline-block;
          vertical-align: middle;
        }
        .demo--radioInput {
          background-color: #fff;
          border: 1px solid rgba(0, 0, 0, 0.15);
          border-radius: 100%;
          display: inline-block;
          height: 16px;
          margin-right: 10px;
          margin-top: -1px;
          vertical-align: middle;
          width: 16px;
          line-height: 1;
          box-sizing: content-box;
        }
        margin-bottom: 15px;
        .wpd-payway-title {
          font-size: 14px;
          font-weight: 400;
          margin-top: 0;
          margin-bottom: 0;
          line-height: 1.8;
        }
        .demo--label {
          margin: 10px 20px 0 0;
          display: inline-block;
          box-sizing: content-box;
          cursor: pointer;
          [type="checkbox"],
          [type="radio"] {
            box-sizing: border-box;
            padding: 0;
          }
          .demo--radio {
            display: none;
          }
          .demo--radioText {
            display: inline-block;
            border: 1px solid #5079b7;
            color: #5079b7;
            border-radius: 3px;
            box-sizing: border-box;
            padding: 10px;
            width: 106px;
            text-align: center;
          }
          .demo--radio:checked + .demo--radioText {
            background-color: #f2f5fd;
          }
        }
      }
      .wpd-inputs {
        background-color: #f5f5f5;
        border: 1px solid #eee;
        border-radius: 4px;
        color: #999;
        margin-bottom: 15px;
        width: 360px;
        margin-top: 15px;
        // line-height: 360px;
        margin: 0 auto;
        textarea {
          border: none;
          background-color: transparent;
          outline: none;
        }
        .wpd-input-item {
          padding: 15px 20px;
        }
        .wpd-input-item.message {
          border-top: 1px solid #eee;
          .wpd-input-textarea {
            height: 50px;
            margin: 0;
            padding: 0;
            resize: none;
            width: 100%;
            font-size: 14px;
          }
        }
      }
      .overlay-actions {
        margin-bottom: 0;
        padding: 0 32px;
        margin-top: 16px;
        .wpd-btn-confirm {
          display: inline-block;
          border-radius: 3px;
          background-color: #388ac3;
          padding: 0 25px;
          height: 40px;
          line-height: 39px;
          cursor: pointer;
          font-size: 18px;
          border: 0;
          color: #fff;
        }
        .wpd-overlay-notice {
          font-size: 12px;
          color: #ccc;
          padding-top: 5px;
        }
      }

      .u-textAlignLeft {
        text-align: left;
      }
    }
    .flag-zf{
      h4{
        font-size: 14px;
        margin-bottom:10px;
      }
      p{
        font-size: 16px;
      }
    }
  }
}

</style>


